<template>
  <el-table
    v-loading="loading"
    :data="data"
    :stripe="stripe"
    :border="border"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
    :row-class-name="tableRowClassName"
  >
    <template v-for="(item, index) in keys">
      <el-table-column
        :label="item.description"
        align="center"
        :prop="index"
        :min-width="item.minWidth"
        v-if="item.type === 'img'"
      >
        <template slot-scope="scope">
          <ImagePreview
            :src="scope.row[index]"
            width="200px"
            height="200px"
          ></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column
        :label="item.description"
        align="center"
        :prop="index"
        v-if="item.type === 'video'"
      >
        <template slot-scope="scope">
          <video class="column-img" :src="scope.row[index]"></video>
        </template>
      </el-table-column>
      <el-table-column
        :label="item.description"
        align="center"
        :prop="index"
        v-else-if="item.type === 'boolean'"
      >
        <template slot-scope="scope">
          <span
            v-if="item.enum && item.enum[0].color"
            :style="{
              color: scope.row[index] ? item.enum[0].color : item.enum[1].color,
            }"
            >{{
              scope.row[index] ? item.enum[0].label : item.enum[1].label
            }}</span
          >
          <span v-else>{{
            scope.row[index] ? item.enum[0] : item.enum[1]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="item.description"
        align="center"
        :prop="index"
        v-else-if="item.enum && item.enum.length > 1"
      >
        <template slot-scope="scope">
          <span
            v-if="
              item.type === 'setColor' &&
              (scope.row[index] || +scope.row[index] === 0)
            "
            :style="{
              color:
                item.enum[scope.row[index]] &&
                item.enum[scope.row[index]].color,
            }"
            >{{
              item.enum[scope.row[index]] && item.enum[scope.row[index]].name
            }}</span
          >
          <span v-else>{{ item.enum[scope.row[index]] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="item.description"
        align="center"
        :prop="index"
        v-else-if="
          item.Object &&
          Object.prototype.toString.call(item.Object) === '[object Object]'
        "
      >
        <template slot-scope="scope">
          <span
            v-if="
              item.type === 'setColor' &&
              (scope.row[index] || +scope.row[index] === 0)
            "
            :style="{
              color:
                item.Object &&
                scope.row[index] &&
                item.Object[scope.row[index]] &&
                item.Object[scope.row[index]].color,
            }"
            >{{
              item.Object &&
              scope.row[index] &&
              item.Object[scope.row[index]] &&
              item.Object[scope.row[index]].name
            }}</span
          >
          <span
            v-else-if="item.type === 'setBooleanColor'"
            :style="{
              color:
                item.Object &&
                scope.row[index] !== null &&
                item.Object[scope.row[index]] &&
                item.Object[scope.row[index]].color,
            }"
          >
            {{
              item.Object &&
              scope.row[index] !== null &&
              item.Object[scope.row[index]] &&
              typeof item.Object[scope.row[index]] === "object"
                ? item.Object[scope.row[index]].name
                : ""
            }}</span
          >
          <span v-else>{{ item.Object[scope.row[index]] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="item.description"
        align="center"
        class-name="small-padding fixed-width"
        v-else-if="item.type === 'slot'"
        :width="item.width"
      >
        <template slot-scope="scope">
          <slot :name="index" :btnItem="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column
        :label="item.description"
        align="center"
        :prop="index"
        min-width="120px"
        :width="item.width"
        v-else
      >
        <template slot-scope="scope">
          <span :style="item.style || {}">{{ scope.row[index] }}</span>
        </template>
      </el-table-column>
    </template>
    <el-table-column
      label="操作"
      align="center"
      fixed="right"
      class-name="small-padding fixed-width"
      min-width="120px"
      :width="operateColumnWidth"
      v-if="isShowOperat"
    >
      <template slot-scope="scope">
        <slot name="btns" :btnItem="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    keys: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isShowOperat: {
      type: Boolean,
      default: true,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    headerCellStyle: {
      type: Object,
      default: () => {},
    },
    cellStyle: {
      type: Object,
      default: () => {},
    },
    tableRowClassName: {
      type: Function,
      default: () => {},
    },
    operateColumnWidth: {
      type: String,
      default: "",
    },
  },
  // created() {
  // },
  // methods: {

  // }
};
</script>

<style lang="scss" scoped>
.table-column {
}
.column-img {
  width: 200px;
}
/* 隐藏滚动条轨道 */
::v-deep ::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
  height: 12px !important; /* 设置滚动条高度 */
}

/* 设置滚动条轨道的背景色 */
::v-deep ::-webkit-scrollbar-track {
  background-color: transparent; /* 设置轨道背景色为透明 */
}
</style>
